<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
  <style>
    body {
      background-image: url("/images/注册.jpg"); /* 替换为您的背景图路径 */
      background-size: cover;
      background-repeat: no-repeat;
      padding-top: 40px;
    }

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .regDiv {
      max-width: 600px;
      width: 100%;
      margin: 0 auto;
      background-color: rgba(255, 255, 255, 0.7);
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
      font-size: 18px;
    }

    .form-heading {
      font-size: 32px;
      text-align: center;
      margin-bottom: 20px;
      background: linear-gradient(to right, #3366cc, #ff66cc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .form-control {
      border-radius: 3px;
    }

    .btn-primary {
      background-color: #337ab7;
      border-color: #337ab7;
    }

    .btn-primary:hover,
    .btn-primary:focus {
      background-color: #286090;
      border-color: #204d74;
    }

    .pull-right {
      float: right;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="regDiv">
    <h1 class="form-heading">用户注册</h1> <!-- Added heading here -->
    <form id="form-reg" class="form-horizontal" role="form" method="post">
      <div class="form-group">
        <label class="col-md-3 control-label">名字：</label>
        <div class="col-md-8">
          <input name="username" type="text" class="form-control" placeholder="请输入用户名">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">密码：</label>
        <div class="col-md-8">
          <input name="password" type="text" class="form-control" placeholder="请输入密码">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">确认密码：</label>
        <div class="col-md-8">
          <input type="text" class="form-control" placeholder="请再次输入密码">
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-3 control-label">邮箱地址：</label>
        <div class="col-md-8">
          <input name="email" type="email" class="form-control" placeholder="请输入邮箱地址">
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-3 control-label">验证码：</label>
        <div class="col-md-8">
          <input name="emailCode" type="text" class="form-control" placeholder="请输入验证码">
        </div>
        <div class="col-md-2">
          <!-- Added button here -->
          <button id="btn-send-verification" class="btn btn-primary" type="button">发送验证码</button>
        </div>

      </div>

      <div class="form-group">
        <label class="col-md-3 control-label"></label>
        <div class="col-md-8">
          <input id="btn-reg" class="btn btn-primary" type="button" value="立即注册" />
          <span class="pull-right"><small>已经有账号？</small><a href="/">登录</a></span>
        </div>
      </div>
    </form>
  </div>
</div>
<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
<script src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript">
  $("#btn-reg").click(function () {
    $.ajax({
      url: "/user/register",
      type: "POST",
      data: $("#form-reg").serialize(),
      dataType: "JSON",
      success: function(json){
        if(json.state == 200){
          alert("注册成功");
          location.href = "login.html";
        }else {
          alert(json.message);
        }
      },
      error: function(xhr){
        alert("注册时产生未知错误！" + xhr.status)
      }
    });
  });

  $("#btn-send-verification").click(function () {
    $.ajax({
      url: "/sendVerificationCode",
      type: "POST",
      data: $("#form-reg").serialize(), // Serialize the form data to send to the server
      dataType: "json",
      success: function(json){
        if(json.state==200){
          alert("验证码发送成功");
        }else {
          alert("验证码发送失败：" + json.error);
        }
      },
      error: function(xhr){
        alert("发送验证码时产生未知错误！" + xhr.status);
      }
    });
  });
</script>
</body>
</html>

